const hookSources = {
  layer0: new ol.source.Vector({ wrapX: false }),
  layer1: new ol.source.Vector({ wrapX: false }),
};

const hookLayers = {
  layer0: new ol.layer.Vector({ source: hookSources.layer0 }),
  layer1: new ol.layer.Vector({ source: hookSources.layer1 }),
};

export const getLayerDataHook = (flag, layerId, map) => {
  flag.value = !flag.value;

  if (flag.value) {
    let service = {
      name: 'guanggu',
      layerId: layerId,
    };
    queryLineByRectangle({
      service: service,
      callback: queryRoadSuccess(map, layerId),
    });
  } else {
    // 清除对应图层的数据
    hookSources[`layer${layerId}`].clear();
  }
};

function queryLineByRectangle({ service, page = 0, size = 60, callback }) {
  //创建一个用于查询的矩形
  let geomObj = new Zondy.Object.Rectangle(114.31, 30.45, 114.43, 30.54);

  //初始化查询结构对象，指定查询获取的要素包含的信息结构
  var queryStruct = new Zondy.Service.QueryFeatureStruct();
  //是否包含几何图形信息
  queryStruct.IncludeGeometry = true;
  //是否包含属性值
  queryStruct.IncludeAttribute = true;
  //IncludeWebGraphic:是否包含颜色的R值
  queryStruct.IncludeWebGraphic = false;

  //指定查询规则
  var rule = new Zondy.Service.QueryFeatureRule({
    //是否将要素的可见性计算在内
    EnableDisplayCondition: false,
    //是否完全包含
    MustInside: false,
    //是否仅比较要素的外包矩形
    CompareRectOnly: false,
    //是否相交
    Intersect: true,
  });

  //实例化查询参数对象
  var queryParam = new Zondy.Service.QueryParameter({
    //用于查询的几何描述
    geometry: geomObj,
    //查询结果的序列化形式
    resultFormat: 'json',
    //指定查询返回结果所包含的要素信息
    struct: queryStruct,
    //几何查询的规则
    rule: rule,
  });

  //设置查询分页号
  queryParam.pageIndex = page;
  //设置查询要素数目
  queryParam.recordNumber = size;

  //实例化地图文档查询服务对象
  var queryService = new Zondy.Service.QueryDocFeature(queryParam, service.name, service.layerId, {
    ip: 'localhost',
    port: '8089', //访问IGServer的端口号，.net版为6163，Java版为8089
  });

  //执行查询操作，querySuccess查询成功回调函数
  queryService.query(callback);
}

/*
  result 是从 queryService.query(callback) 方法调用中传递过来的。
  当调用 queryService.query(callback) 时，callback 函数（这里是 queryRoadSuccess(map) 返回的函数）会被作为查询成功后的回调函数。
  当查询成功时，queryService 会调用这个回调函数，并将查询结果作为参数传递进去。
*/
//查询成功回调
function queryRoadSuccess(map, layerId) {
  return async result => {
    // 分析路况
    const features = await querySuccess(result, layerId);
    // 添加要素到对应的数据源
    hookSources[`layer${layerId}`].addFeatures(features);
    // 添加对应的图层到地图
    map.value.addLayer(hookLayers[`layer${layerId}`]);
  };
}

const querySuccess = (result, layerId) => {
  //初始化Zondy.Format.PolygonJSON类
  var format = new Zondy.Format.PolygonJSON();
  //将MapGIS要素JSON反序列化为ol.Feature类型数组
  var features = format.read(result);

  if (layerId === 0) {
    // 为 layerId=0 的图层设置特定样式
    result.SFEleArray.forEach((item, index) => {
      //居民区ID
      let num = item.AttValue[0];
      let color = '#008001'; // 绿色
      if (num < 3) {
        color = '#ff0000'; // 红色
      } else if (num < 6) {
        color = '#ff8c00'; // 橙色
      } else if (num < 9) {
        color = '#ffff00'; // 黄色
      } else if (num < 12) {
        color = '#008001'; // 绿色
      } else if (num < 15) {
        color = '#0000ff'; // 蓝色
      } else if (num < 18) {
        color = '#8a2be2'; // 紫色
      } else if (num < 21) {
        color = '#ff00ff'; // 粉色
      } else if (num < 24) {
        color = '#ffa500'; // 橘黄色
      } else if (num < 27) {
        color = '#800080'; // 紫色
      } else if (num < 30) {
        color = '#000080'; // 蓝色
      } else if (num < 33) {
        color = '#008080'; // 青色
      } else {
        color = '#808000'; // 褐色
      }

      //样式
      let styles = new ol.style.Style({
        //边线样式
        fill: new ol.style.Fill({
          color: color,
        }),
      });

      //给要素添加样式
      features[index].setStyle(styles);
    });
  } else {
    // 为其他图层保持原有样式
    result.SFEleArray.forEach((item, index) => {
      //车流量
      let num = item.AttValue[4];
      //配色
      let color = '#008001';
      if (num <= 1500 && num > 1000) {
        color = '#fdff02';
      } else if (num > 1500) {
        color = '#fe0101';
      }

      //样式
      let styles = new ol.style.Style({
        //边线样式
        stroke: new ol.style.Stroke({
          color: color,
          width: 8,
        }),
      });

      //给要素添加样式
      features[index].setStyle(styles);
    });
  }

  return features;
};
